<template>
	<view class="page-circle-detail">
		<u-navbar :is-back="true" height="46" title-size="36rpx"
		 :title-bold="true">
			<view class="navbar-right" slot="right"  @click="onShareType(0)">
				<view class="message-box right-item">
					<u-icon name="zhuanfa" size="38" style="margin-right: 30rpx;"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="title">
			{{cricleDetail.title}}
		</view>
		<view class="header">
			<view class="header-left">
				<view class="picture">
					<image :src="cricleDetail.logo" mode=""></image>
				</view>
				<view class="right-time">
					<view class="nick">
						{{cricleDetail.nickname}}
					</view>
					<view class="time">
						{{$u.timeFormat(cricleDetail._createtime, 'mm-dd  hh:MM')}}
					</view>
				</view>
			</view>
			<view :class="cricleDetail.sfgz==1?'no-guanzhu':'header-right'" @click="concern(2)">
				{{cricleDetail.sfgz==1?"已关注":"关注"}}
			</view>
		</view>
		<!-- <view class="preface">
			<view class="preface-text">
				前言
			</view>
		</view>
		<view class="preface-desc">
			<view class="preface-desc-left">
				“
			</view>
			<view class="preface-desc-right">
				对于每一个选择在外打拼的年轻人来说，如果想要在一个陌生城市里生存下来，那么他最先需要做的就是出一个稳定的居住场所，这样不仅可以
			</view>
		</view> -->
		<!-- 富文本数据 -->
		<view class="content">
			<rich-text :nodes="richText"></rich-text>
		</view>
		<!-- <view class="content">
			但近年来，租房已经成了人们十分关心的话题，怎么租房才最安全？怎么才能租到最合适的房子都是人们十分关心的话题。在现如今房价十分不
		</view> -->
		<view class="img" v-for="(item,index) in dkdtp" :key="item.id">
			<image :src="$baseUrl+item.lj" mode="aspectFill" lazy-load @click="previewImage(index)"></image>
		</view>
		<!-- <view class="content">
			但近年来，租房已经成了人们十分关心的话题，怎么租房才最安全？怎么才能租到最合适的房子都是人们十分关心的话题。在现如今房价十分不
		</view> -->
		<view class="hot-search">
			<view class="hot-search-tit">
				大家都在搜
			</view>
			<view class="li-warp">
				<block v-for="(item,index) in hotSearchList" :key="item.id">
					<view class="li" @click="goSearch(item)" v-if="item.keywords">
						{{item.keywords}}
					</view>
				</block>
			</view>
		</view>
		<!-- <view class="scroll-li">
			<view class="scroll-list">
				<view class="scroll-list-title">
					中国“第三艘航母”明年初下水？外媒：世界海洋秩序正在转向亚洲
				</view>
				<view class="img-1">
					<image src="/static/gongchnegquan/工程圈_07.png" mode=""></image>
				</view>
				<view class="cate">
					<text class="cate-list cate-list-fc">环球时报</text>
					<text class="cate-list cate-list-fc">4评论</text>
				</view>
				<view class="line"></view>
			</view>
		</view> -->
		<!-- <view class="scroll-li">
			<view class="scroll-list">
				<view class="scroll-list-child">
					<view class="left-desc">
						<view class="desc">
							中石油：111人与吉林通报确诊病例共同参会
						</view>
						<view class="cate">
							<text class="cate-list cate-list-fc">北京日报客户端</text>
							<text class="cate-list cate-list-fc">66评论</text>
						</view>
					</view>
					<view class="right-img">
						<image src="/static/gongchnegquan/工程圈_09.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="scroll-list">
				<view class="scroll-list-child">
					<view class="left-desc">
						<view class="desc">
							中石油：111人与吉林通报确诊病例共同参会
						</view>
						<view class="cate">
							<text class="cate-list cate-list-fc">北京日报客户端</text>
							<text class="cate-list cate-list-fc">66评论</text>
						</view>
					</view>
					<view class="right-img">
						<image src="/static/gongchnegquan/工程圈_09.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="scroll-list">
				<view class="scroll-list-child">
					<view class="left-desc">
						<view class="desc">
							中石油：111人与吉林通报确诊病例共同参会
						</view>
						<view class="cate">
							<text class="cate-list cate-list-fc">北京日报客户端</text>
							<text class="cate-list cate-list-fc">66评论</text>
						</view>
					</view>
					<view class="right-img">
						<image src="/static/gongchnegquan/工程圈_09.png" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
		<view class="comment-warp">
			<view class="comment-total-num">
				共{{commentTotal}}条评论
			</view>
			<comment-data-list :commentList="commentList" @commentAll="commentAll"
			@reply="reply" @delReply="delReply" @close="close" :commentShow="commentShow"></comment-data-list>
		</view>
		<comment @toggleMask="toggleMask('show')" 
		@concern = "concern"
		:detail="cricleDetail"></comment>
		<u-toast ref="uToast" />
		<!-- 发布评论 -->
		<ygcComment
		ref="ygcComment"
		:placeholder="'发布评论'" 
		@pubComment="pubComment"></ygcComment>
		<u-modal v-model="delModelShow" @confirm="confirm" @cancel="cancel"
		:show-confirm-button ="true"
		:show-cancel-button="true"
		:content="delModelContent"></u-modal>
	</view>
</template>

<script>
	import RichText from "@/common/richtext.js"
	import {commonGet} from "../../../api/commonapi.js"
	import secondComment from '@/components/common/second-comment.vue';
	import comment from '@/components/common/comment.vue';
	import ygcComment from '@/components/common/ygc-comment.vue';
	import commentDataList from '@/components/common/comment-data-list.vue'
	import ShareMerge from "@/common/ShareMerge.js"
	export default {
		mixins: [ShareMerge],
		components:{
			comment,
			secondComment,
			ygcComment,
			commentDataList
		},
		data() {
			return {
				commentShow:false,
				id:"",
				fromID:"", //一级评论id
				level:1, //评论层级
				cricleDetail:{},
				commentContent:"",
				$baseUrl:"",
				guanzhu:false,
				commentList:[],
				commentTotal:0,
				secondCommentList:[],
				_creatememid:"", //当前登录人的_creatememid
				delModelShow:false,
				delModelContent:"确定删除吗？",
				hotSearchList:[],
				commentID:"", //删除时的评论id
				dkdtp:[],
				richText:"",  //富文本数据
				
				shareUrl: "",
				shareTitle: "",
				shareContent: "",
				shareImg: "",
				spageid: "2153",
				creatememid:"",
				img:"",
			}
		},
		onLoad(options){
			this.$baseUrl = this.baseUrl
			this.id = options.id
			this.getCricleDetail()
			this.getComment(options.id)
			if(this.$store.state.userIn){
				this._creatememid = JSON.parse(this.$store.state.userIn).id
				this.creatememid = JSON.parse(this.$store.state.userIn).id
			}
		},
		methods: {
			
			toggleMask(type){
				if(this.$store.state.token){
					this.level = 1
					this.$refs.ygcComment.toggleMask(type);
				}else{
					this.$refs.uToast.show({
						title: "请先登录",
						url: '/pages/myuser/user/UserInfo',
					})
				}
			},
			toggleMask2(type){
				if(this.$store.state.token){
					this.level = 2
					this.$refs.ygcComment.toggleMask(type);
				}else{
					this.$refs.uToast.show({
						title: "请先登录",
						url: '/pages/myuser/user/UserInfo',
					})
				}
			},
			commentAll(fromID,secondCommentList){
				this.level = 2
				this.fromID = fromID
				this.commentShow = true
				this.secondCommentList = secondCommentList
			},
			getCricleDetail(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"mDynamic_query_proc",
					para:JSON.stringify({
						id: _this.id
					})
				}
				commonGet(query,(result) => { 
					_this.cricleDetail = result.Data
					_this.hotSearchList = result.Data.Datas4
					_this.dkdtp = JSON.parse(result.Data.dkdtp)
					_this.richText = RichText.formatRichText(_this.cricleDetail.dkdnr)
					
					_this.shareTitle=  result.Data.title
					_this.shareContent= result.Data.dkdnr 
					_this.img=result.Data.dkmrtp
					_this.shareImg= _this.baseUrl+ result.Data.dkmrtp 
				})
			},
			//添加评论和回复
			pubComment(commentContent1) {
				let _this =this
				if(uni.$u.trim(commentContent1)){
					if(_this.level == 1){
						var query = {
							ak:_this.$store.state.token,
							cmd:"sCommentM_add_proc",
							para:JSON.stringify({
								pageid: '2153',
								keyid: _this.id,
								title: _this.cricleDetail.title,
								img: _this.cricleDetail.dkmrtp,
								comments: uni.$u.trim(commentContent1),
								_creatememid:_this.cricleDetail._creatememid,
								_appid:_this.cricleDetail._appid
							})
						}
					}else if(_this.level == 2){
						var query = {
							ak:_this.$store.state.token,
							cmd:"sReply_add_proc",
							para:JSON.stringify({
								fromID: _this.fromID,
								comments: uni.$u.trim(commentContent1),
								_creatememid:_this.cricleDetail._creatememid,
								_appid:_this.cricleDetail._appid
							})
						}
					}
					commonGet(query,(result)=>{
						if(result.Message == "操作成功！"){
							_this.$refs.ygcComment.toggleMask('');
							var nowDate = new Date().getTime()
							let obj = {
								logo:_this.$store.state.userIn.logo || "/img/no.png",
								nickname:_this.$store.state.userIn.nickname,
								comments:uni.$u.trim(commentContent1),
								_createtime:nowDate,
								_creatememid:_this._creatememid,
								children:[]
							}
							if(_this.level == 1){
								// _this.commentList.unshift(obj)
								_this.getComment(_this.id)
							}else if(_this.level == 2){
								_this.getComment(_this.id)
							}
							_this.commentTotal += 1
							_this.cricleDetail.pjzs = _this.commentTotal
						}
					})
				}else{
					_this.$refs.uToast.show({
						title: "内容不能为空"
					})
				}
				_this.commentContent = commentContent1;
			},
			// 关注
			/**
			 * stype
			 * 0 收藏
			 * 1 点赞
			 * 2 关注
			*/
			concern(stype){
				let _this = this
				if(_this.$store.state.token){
					var cmd = ""
					var spageid = "2153"
					var skeyid = _this.id
					var _appid = ""
					if(_this.$store.state.userIn){
						_appid = JSON.parse(_this.$store.state.userIn)._appid
					}
					switch(stype){
						case 0: cmd = "mMemFav_add0_proc";break;
						case 1: cmd = "mMemFav_add1_proc";break;
						case 2: 
							cmd = "mMemFav_add2_proc"
							spageid = "1010"
							skeyid = _this.cricleDetail._creatememid;
							break;
					}
					var query={
						ak:_this.$store.state.token,
						cmd:cmd,
						para:JSON.stringify({
							spageid: spageid,
							img: _this.cricleDetail.dkmrtp,
							skeyid: skeyid,
							title: _this.cricleDetail.title,
							_creatememid:_this._creatememid,
							_appid:_appid,
							nickname:_this.cricleDetail.nickname,
							logo:_this.cricleDetail.logo
						})
					}
					commonGet(query,(result)=>{
						console.log('123----->',result)
						if(result.Data.id == 1){
							switch(stype){
								case 0: _this.cricleDetail.sfsc = ""
									_this.cricleDetail.sccounts = Number(_this.cricleDetail.sccounts) - 1
									_this.$refs.uToast.show({title: "已取消收藏"});
									break;
								case 1: 
									_this.cricleDetail.sfdz = "" 
									_this.cricleDetail.dzcounts = Number(_this.cricleDetail.dzcounts) - 1
									_this.$refs.uToast.show({title: "已取消点赞"});
									break;
								case 2: 
									_this.cricleDetail.sfgz = "" 
									_this.$refs.uToast.show({title: "已取消关注"});
									break;
							}
						}else{
							switch(stype){
								case 0: _this.cricleDetail.sfsc = "1"
									_this.cricleDetail.sccounts = Number(_this.cricleDetail.sccounts) + 1
									_this.$refs.uToast.show({title: "收藏成功"});
									break;
								case 1: 
									_this.cricleDetail.sfdz = "1" 
									_this.cricleDetail.dzcounts = Number(_this.cricleDetail.dzcounts) + 1
									_this.$refs.uToast.show({title: "点赞成功"});
									break;
								case 2: 
									_this.cricleDetail.sfgz = "1" 
									_this.$refs.uToast.show({title: "关注成功"});
									break;
							}
						}
					})
				}else{
					_this.$refs.uToast.show({
						title: "请先登录",
						url: '/pages/myuser/user/UserInfo',
					})
				}
				
			},
			// 获取评论数据
			getComment(aid){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"sCommentM_list_proc",
					para:JSON.stringify({
						"keyid": aid,
						pageid:2153,
					})
				}
				commonGet(query,(result)=>{
					result.Data.Data.forEach((item1,index1)=>{
						item1.children = []
						result.Data.Datas1.filter((item2,index2) => {
							if(item1.id == item2.fromID){
								item1.children.push(item2)
							}
						})
					})
					_this.commentList = result.Data.Data
					_this.commentTotal = result.Data.Data.length + result.Data.Datas1.length
				})
			},
			// 添加回复
			reply(fromID){
				console.log('fromID------->',fromID)
				if(this.$store.state.token){
					this.level = 2
					this.fromID = fromID
					this.$refs.ygcComment.toggleMask('show');
				}else{
					this.$refs.uToast.show({
						title: "请先登录",
						url: '/pages/myuser/user/UserInfo',
					})
				}
				
			},
			close(){
				this.commentShow = false
				this.level = 1
			},
			// 取消删除
			cancel(){
				this.delModelShow = false;
			},
			// 确定删除
			confirm(){
				let _this = this
				var _cmd = ""
				if(_this.level == 1){
					_cmd = "sCommentM_delete_proc"
				}else if(_this.level == 2){
					_cmd = "sReply_delete_proc"
				}
				var query = {
					ak:_this.$store.state.token,
					cmd:_cmd,
					para:JSON.stringify({
						id:_this.commentID,
						_creatememid:_this._creatememid 
					})
				}
				commonGet(query,(result)=>{
					if(result.Message == "操作成功！"){
						if(_this.level == 1){
							_this.commentList.forEach((item,index)=>{
								if(_this.commentID == item.id){
									_this.commentList.splice(index,1)
								}
							})
						}else{
							_this.secondCommentList.forEach((item,index)=>{
								if(_this.commentID == item.id){
									_this.secondCommentList.splice(index,1)
								}
							})
						}
					}
					_this.commentTotal -= 1
					_this.cricleDetail.pjzs = _this.commentTotal
				})
			},
			delReply(commentID){
				this.delModelShow = true;
				this.commentID = commentID
			},
			goSearch(item){
				this.$u.route({
					url: '/pages/HomeLnner/search/search',
					params: {
						keywords: item.keywords
					}
				})
			},
			previewImage(index){
				let imgArr = []
				this.dkdtp.forEach((item,index)=>{
					imgArr.push(this.$baseUrl + item.lj)
				})
				uni.previewImage({
					urls: imgArr,
					current:index
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fbfbfb;
}
.page-circle-detail{
	overflow: hidden;
}
.title{
	font-size: 44rpx;
	padding: 36rpx 30rpx 96rpx 30rpx;
}
.header{
	width: 100%;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	.header-left{
		height: 64rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.picture{
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.right-time{
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.nick{
				font-size: 30rpx;
				font-weight: bold;
			}
			.time{
				font-size: 22rpx;
				color: #808080;
			}
		}
	}
	.no-guanzhu,
	.header-right{
		width: 100rpx;
		height: 50rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}
	.header-right{
		background-color: #c40200;
		color: white;
	}
	.no-guanzhu{
		color: white;
		background-color: #999;
	}
}
.preface{
	padding: 50rpx 30rpx;
	.preface-text::before{
		content: "";
		display: block;
		width: 10rpx;
		height: 38rpx;
		background-color: #c40200;
		border-radius: 20rpx;
	}
	.preface-text{
		width: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
	}
}
.preface-desc{
	margin: 0 30rpx;
	padding: 30rpx 30rpx 30rpx 0rpx;
	background-color: #f5f5f5;
	border-radius: 20rpx;
	font-size: 30rpx;
	display: flex;
	justify-content: space-between;
	.preface-desc-left{
		font-family: "宋体";
		font-size: 72rpx;
	}
}
.content{
	padding: 38rpx 30rpx 50rpx 30rpx;
	font-size: 30rpx;
	line-height: 50rpx;
}
.img{
	padding: 0 30rpx 30rpx 30rpx;
	image{
		width: 100%;
		height: 460rpx;
	}
	
}
.hot-search{
	margin: 0 30rpx;
	padding: 30rpx 24rpx;
	background-color: #fff;
	border-radius: 20rpx;
	.hot-search-tit{
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 34rpx;
	}
	.li-warp{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2,50%);
		grid-column-gap: 10rpx;
		grid-row-gap: 10rpx;
		.li{
			background-color: #f5f5f5;
			border-radius: 8rpx;
			padding: 15rpx;
			font-size: 26rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
}
.scroll-li{
	margin: 16rpx 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
}
.scroll-list{
		padding: 26rpx 30rpx 0rpx 30rpx;
		.scroll-list-title{
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}
		.img{
			height: 320rpx;
			display: flex;
			border-radius: 20rpx;
			overflow: hidden;
			.img-left,
			.img-right-2{
				width: 450rpx;
				height: 320rpx;
				image{
					width: 450rpx;
					height: 320rpx;
				}
			}
			.img-left,
			.img-left-2{
				margin-right: 8rpx;
			}
			.img-right,
			.img-left-2{
				width: 230rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.img-right-list{
					width: 230rpx;
					height: 156rpx;
					image{
						width: 230rpx;
						height: 158rpx;
					}
				}
			}
		}
		.img-1{
			width: 100%;
			height: 320rpx;
			overflow: hidden;
			border-radius: 20rpx;
			image{
				width: 100%;
				height: 320rpx;
			}
		}
		.img-4{
			width: 100%;
			height: 216rpx;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			image{
				width: 340rpx;
				height: 216rpx;
			}
		}
		.cate{
			font-size: 22rpx;
			margin-top: 20rpx;
			.cate-list{
				display: inline-block;
				margin-right: 26rpx;
			}
			.cate-list-fc{
				color: #999999;
			}
		}
		.line{
			width: 100%;
			height: 1rpx;
			margin-top: 26rpx;
		}
		.scroll-list-child{
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.left-desc{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 142rpx;
				width: 100%;
				.desc{
					font-size: 32rpx;
				}
			}
			.right-img{
				margin-left: 20rpx;
				width: 318rpx;
				height: 142rpx;
				border-radius: 16rpx;
				overflow: hidden;
				image{
					width: 224rpx;
					height: 142rpx;
				}
			}
		}
		.name-wrap{
			width: 266rpx;
			display: flex;
			justify-content:space-between;
			padding-bottom: 32rpx;
			.logo{
				width: 	72rpx;
				height: 72rpx;
				image{
					width: 	72rpx;
					height: 72rpx;
				}
			}
			.name-wrap-right{
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.name{
					font-size: 28rpx;
				}
				.ass-name{
					font-size: 22rpx;
					color: #999;
				}
			}
		}
		.tap{
			height: 30rpx;
			width: 100%;
			display: flex;
			margin: 20rpx 0;
			align-items: center;
			.tap-list{
				flex: 1;
				text-align: center;
			}
			.tap-list:nth-child(2){
				border-left: 1px solid #ebebeb;
				border-right: 1px solid #ebebeb;
			}
		}
	}
.comment-warp{
	padding: 30rpx;
	background-color: #fff;
	margin-top: 46rpx;
	margin-bottom: 86rpx;
	.comment-total-num{
		font-size: 22rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

}
.print-comment-wrap{
	position: fixed;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 64rxp;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-top: 1px solid #ebebeb;
	display: flex;
	.print-comment-left{
		height: 66rpx;
		width: 468rpx;
		background-color: #f5f5f5;
		border-radius: 66rpx;
		margin-right: 32rpx;
		display: flex;
		align-items: center;
		.print-comment{
			width: 160rpx;
			height: 50rpx;
		}
	}
	.print-comment-right{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

</style>
